<template>
  <div class="goodsClass-box">
    <div class="topfixed">
      <nav-com
          title="商品分类"
          :showView="showView"
          @back="backHandler()"
      ></nav-com>
      <!-- <div class="search-form">
        <div class="shop-icon">
          <img src="@/assets/shop/shop-icon.png" />
        </div>
        <div class="search-input">
          <input type="text" placeholder="默认全部店铺" v-model="inputKey" />
        </div>
        <div class="more-icon">
          <img src="@/assets/shop/switch-icon.png" />
        </div>
      </div> -->
      <!-- <form action="/"> -->
      <van-search style="width:98vw;"
                  v-model="inputKey"
                  show-action
                  placeholder="默认全部店铺"
                  @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <!-- </form> -->

    </div>

    <div class="nodata" v-if="list.length==0&&inputKey">
      <img src="@/assets/shop/empty.png">
      <span>暂无搜索结果～</span>
    </div>
    <!-- tab -->
    <div class="model" v-else>
      <div class="left-nav">
        <div
            class="nav-item"
            :class="activeIndx == index ? 'active' : ''"
            v-for="(item, index) in navlist"
            :key="index"
            @click="tabchange(index, item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="content-box">
        <div
            class="goods-box"
            v-for="(item, index) in list"
            :key="index"
            @click="handerDetails(item.id)"
        >
          <div class="goods-img">
            <img :src="item.image" mode="aspectFill"/>
          </div>
          <div class="goods-info">
            <div class="name">{{ item.title }}</div>
          </div>
          <div class="baoyou" v-if="item.isdelivery == '1'">全部包邮</div>
          <div class="goods-info">
            <div class="price">¥{{ item.price }}</div>
            <div class="sale">已售{{ item.sales }}件</div>
          </div>
          <div class="shopname">{{ item.shopname }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { shopcategoryAll, shopgoodslist } from "@/api/api";
import navCom from "@/component/nav";
import Loading from "@/component/loading";
import { Popup, Toast,Search  } from "vant";
import { Icon } from "vant";
import Upgrade from "@/component/upgrade.vue";

export default {
  name: "index",
  components: {
    navCom,
    Loading,
    Upgrade,
  },
  data() {
    return {
      showView: true,
      LOADING: true,
      show: false,
      showTip: false,
      inputKey: "",
      navlist: [],
      list: [],
      activeIndx: 0,
      selectItem:{}
    };
  },
  mounted() {
    this.getcategory();
  },
  methods: {
    onSearch (){
      this.getlist();
    },
    onCancel(){
      Toast('取消')
    },
    //返回
    backHandler() {
      this.$router.go(-1);
    },
    getcategory() {
      shopcategoryAll({
        // shop_id:this.$route.params["id"]
      })
          .then((result) => {
            if (result.data.code == 1) {
              this.navlist = result.data.data;
              this.selectItem=this.navlist[0]
              this.getlist();
            }
          })
          .catch((err) => {});
    },
    getlist() {
      shopgoodslist({ main_cateid: this.selectItem.id, keywords:this.inputKey})
          .then((result) => {
            if (result.data.code == 1) {
              this.list = result.data.data.data;
            }
          })
          .catch((err) => {});
    },
    tabchange(index, item) {
      this.activeIndx = index;
      this.selectItem=item;
      this.getlist();
    },
    //跳转详情
    handerDetails(id) {
      this.$router.push({
        name: "sharegoodDetails",
        params: { id: id },
      });
    },
  },
};
</script>
<style scoped>
.topfixed {
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
}
.search-form {
  margin: 12px 16px 8px;
  background: #f7f7f7;
  border-radius: 16px;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.shop-icon {
  width: 20px;
  height: 16px;
}
.shop-icon img {
  width: 100%;
}
.search-input {
  flex: 1;
}
.search-input input {
  border: none;
  background: #f7f7f7;
  width: 100%;
  font-size: 12px;
}
.more-icon {
  width: 20px;
}
.more-icon img {
  width: 100%;
}
.model {
  background: #f8f8f8;
  min-height: 100vh;
  display: flex;
  padding-top: 110px;
}
.left-nav {
  width: 82px;
  text-align: center;
}
.nav-item {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 20px;
  margin-bottom: 30px;
}
.nav-item.active {
  color: #fb7647;
  font-size: 13px;
}
.content-box {
  background: #ffffff;
  border-radius: 15px;
  width: calc(100% - 90px);
  margin-right: 10px;
  padding: 10px 11px;
}
.goods-box {
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 5%);
  border-radius: 6px;
  min-height: 200px;
  width: 48%;
  float: left;
  padding-bottom: 5px;
}
.goods-box:nth-child(odd) {
  margin-right: 10px;
}
.goods-img {
  width: 100%;
}
.goods-img img {
  width: 100%;
  height: 100%;
}
.goods-info {
  position: relative;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.goods-info .name {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 18px;
  text-shadow: 0px 2px 10px rgb(0 0 0 / 5%);
  text-overflow: -o-ellipsis-lastline;
	overflow: hidden;			
	text-overflow: ellipsis;	
	display: -webkit-box;		
	-webkit-line-clamp: 2;		
	line-clamp: 2;					
	-webkit-box-orient: vertical;
}
.goods-info .sale {
  font-size: 10px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 14px;
  text-shadow: 0px 2px 10px rgb(0 0 0 / 5%);
  position: absolute;
  right: 2px;
  bottom: 2px;
}
.baoyou {
  width: 48px;
  height: 14px;
  box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 5%);
  border-radius: 2px;
  border: 1px solid #ff3200;
  text-align: center;
  font-size: 10px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ff3200;
  line-height: 14px;
  text-shadow: 0px 2px 10px rgb(0 0 0 / 5%);
}
.price {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #fe4b20;
  line-height: 22px;
  text-shadow: 0px 2px 10px rgb(0 0 0 / 5%);
}
.shopname {
  font-size: 10px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 14px;
  text-shadow: 0px 2px 10px rgb(0 0 0 / 5%);
}
.nodata{
  margin: 40% auto 20px;
}
.nodata img{
  width: 206px;
  margin-left: calc(50% - 108px);
}
.nodata span{
  display: block;
  text-align: center;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #D1D2D5;
  line-height: 20px;
}
/deep/ .van-search__content{
  border-radius: 16px;
}
</style>
